@charset "UTF-8";

html,body{width: 100%;height: 100%;text-align: center;font-family: 'FangSong';color: #fff;/*font-size: 62.5%;*/}
.page-container{position: relative;max-width: 640px;margin: 0 auto;}

.m1{background: url(../images/m1.png) center no-repeat;width: 38px;height: 39px;}
.m2{background: url(../images/m2.png) center no-repeat;width: 38px;height: 39px;}

.btn_start { width: 90px; height: 90px; position: absolute; left: 0;top: 0; z-index: 10; margin-left: -45px;}
.btn_music{ /*background: url(../images/btn_music.png) 0 0 no-repeat; width: 34px; height: 34px;*/
    -webkit-background-size: 100% auto; background-size: 100% auto; position: fixed;  left: 10px;top: 10px; z-index: 8;}

.testMusic{position: absolute;top: 0;z-index: 10;}
.play{
 -webkit-animation: play 4s linear infinite;
animation: play 4s linear infinite;
}
/*@-webkit-keyframes play{
    0%{transform:rotate(0deg);-webkit-transform:rotate(0deg);}
    100%{transform:rotate:(360deg);-webkit-transform:rotate:(360deg);}
}   
@keyframes play{
    0%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}
    100%{transform:rotate:(0deg);-webkit-transform:rotate:(0deg);}
}   */
@keyframes play {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
} 
@-webkit-keyframes play {
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
} 
@-ms-keyframes play {
  from {-ms-transform: rotate(0deg);}
  to {-ms-transform: rotate(360deg);}
}
@-moz-keyframes play {
  from {-moz-transform: rotate(0deg);}
  to {-moz-transform: rotate(360deg);}
}
.music_off{background-position: 0 -34px;}

.section{background-color: #10151f;position: relative;-webkit-box-sizing: border-box;height: 100%; -moz-box-sizing: border-box;box-sizing: border-box;max-width: 640px;left: 0;right: 0;margin: 0 auto;}

.section1{height: 100%;width: 100%;}
.section-bg{width: 100%;top: 16.5%;position: absolute;left: 0;right: 0;margin: 0 auto;}
.section1-box{position: absolute;top: 0;height: 96%;width: 100%;vertical-align: middle;}
.section1-top-right,.section1-bottom-left1,.section1-bottom-pic,.section1-bottom-pic2{
    -webkit-writing-mode:vertical-rl;writing-mode:tb-rl;position: absolute;letter-spacing:0.2rem;
}
.section1-top-right{font-size:1.1rem;top: 5%;right: 10%;opacity: 0;}
.active .section1-top-right{
    animation: section1 5s ease 1s 1; 
     -webkit-animation: section1 5s ease 1s 1 forwards;
 }/*调用名称为section1的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/
.section1-bottom-left1{left: 9%;color: #449001;font-size: 1.2rem;bottom:0;font-weight: bold;opacity: 0;}
.active .section1-bottom-left1{ -webkit-animation: section1 4s ease 2s 1 forwards;}

.section1-bottom-pic{bottom: 10%;left:18%;opacity: 0;}
.active .section1-bottom-pic{ -webkit-animation: section1 4s ease 2s 1 forwards;}

.section1-bottom-pic2{bottom: 5%;right:5%;width: 40%;opacity: 0;}
.active .section1-bottom-pic2{ -webkit-animation: section1 4s ease 2s 1 forwards;}

@-webkit-keyframes section1{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes section1{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

.section2{}
.section2-top{text-align: center;color: #fff;font-size: 1rem;margin: 0 auto;position: absolute;top: 7%;;left: 0;right: 0;line-height: 1.5rem;}
.section2-top span{opacity: 0;}
.active .section2-top span.section2-span1,.active .section4-bottom-info span.section4-span1,.active .section5-menu span.section5-span1{ 
    -webkit-animation: section1 2s ease 1s 1 forwards;
}
.active .section2-top span.section2-span2,.active .section4-bottom-info span.section4-span2,.active .section5-menu span.section5-span2{ 
    -webkit-animation: section1 2s ease 2s 1 forwards;
}
.active .section2-top span.section2-span3,.active .section4-bottom-info span.section4-span3,.active .section5-menu span.section5-span3{ 
    -webkit-animation: section1 2s ease 3s 1 forwards;
}
.active .section2-top span.section2-span4{ 
    -webkit-animation: section1 2s ease 4s 1 forwards;
}
.section2_bottom-pic1,.section2_bottom-pic2{position: absolute;left: 0;right: 0;}
.section2_bottom-pic1{width: 30%;top: 27%;display: inline-block;margin: 0 auto ;opacity: 0;}
.active .section2_bottom-pic1{ 
    -webkit-animation: section2 2s linear 2s 1 infinite;animation: section2 2s infinite linear 2s ;
}
@-webkit-keyframes section2{
      0% { -webkit-transform: scale(1, 1);}
       100% { -webkit-transform: scale(1.1, 1.1);opacity: 1;}
    
}
@keyframes section2{
      0% { transform: scale(1, 1);}
       100% { transform: scale(1.1, 1.1);opacity: 1;}
    
}
.section2_bottom-pic2{width: 100%;bottom: 0;margin-top:5%;opacity: 0;}
.active .section2_bottom-pic2{ -webkit-animation: section1 5s linear 1s 1 forwards;}
.section3{}
.section3-top-bg{width: 100%;top: 0;text-align: center;}
.section3-top-pic{position: absolute;width: 50%;top: 31%;left: 6%;opacity: 0;}
.active .section3-top-pic{ -webkit-animation: pic1 2s linear 1s 1 forwards;}
    @keyframes pic1{
        0%{left: 0;}
        100%{left: 6%;opacity: 1;}
    }
@-webkit-keyframes pic1{
        0%{left: 0;}
        100%{left: 6%;opacity: 1;}
    }
.section3-center-info{position: absolute;right: 6%;text-align: right;top: 45%;font-size: 1.6rem;font-weight:900;font-family: 'FZDaBiaoSong-B06S';opacity: 0;}
.active .section3-center-info{ -webkit-animation: section3 2s linear 1s 1 forwards;animation: section3 2s linear 1s 1 forwards;}
@keyframes section3{
    0%{top: 0;opacity: 0.3;
    }
    50%{top: 20%;opacity: 0.7;}
    100%{top: 45%;opacity: 1;}
}
@-webkit-keyframes section3{
    0%{top: 0;opacity: 0.3;}
    50%{top: 20%;opacity: 0.7;}
    100%{top: 45%;opacity: 1;}
}
.section3-bottom-info{right: 5%;position: absolute;bottom: 15%;text-decoration: underline;line-height: 1.7rem;font-size: 1.1rem;opacity: 0;}
.active .section3-bottom-info{-webkit-animation:section1 3s ease 2s 1 forwards;}

.section3-bottom-pic{position: absolute;bottom: 10%;left:10%;opacity: 0}
.active .section3-bottom-pic{-webkit-animation:section1 2s ease 1s 1 forwards;}

.section4{}

.section4-top-pic{top: 4%;position: absolute;left: 0;right: 0;margin: 0 auto;opacity: 0;}
.active .section4-top-pic{-webkit-animation:section4TopPic 2s ease-in 3s 1 forwards;}
@keyframes section4TopPic{
    0%{top: 20%;opacity: 0.3;}
    50%{opacity: 0.8;top: 10%;}
    100%{opacity: 1;top: 4%;}
}
@-webkit-keyframes section4TopPic{
    0%{top: 20%;opacity: 0.3;}
    50%{opacity: 0.8;top: 10%;}
    100%{opacity: 1;top: 4%;}
}
.section4-top-bg{width: 100%;margin-top: 23%;}
.section4-bottom-box{margin: 0 auto;width: 80%;color: #e9ebea;}
.section4-bottom-title{border-bottom: 1px solid #fff;text-align: left;font-size: 1.6rem;font-family: 'FZDaBiaoSong-B06S';font-weight: bold;opacity: 0;}
.active .section4-bottom-title{-webkit-animation:section4 2s linear 1s 1 forwards;animation:section4 2s linear 1s 1 forwards;}

@keyframes section4{
    0%{transform:scale(1.2,1.2);opacity: 0.5;}
    50%{transform:scale(1.1,1.1);opacity: 0.8;}
    100%{transform:scale(1);opacity: 1;}

}
@-webkit-keyframes section4{
    0%{-webkit-transform:scale(1.2,1.2);opacity: 0.5;}
    50%{-webkit-transform:scale(1.1,1.1);opacity: 0.8;}
    100%{-webkit-transform:scale(1);opacity: 1;}

}
.section4-bottom-info{font-size: 1rem;text-align: left;text-decoration: underline;line-height: 1.7rem;margin-top: 5%;}
.section4-bottom-info span{opacity: 0;}
.section5{}
.section5-box{color: #e9ebea;font-family: 'FZDaBiaoSong-B06S';}
.section5-bottom-pic{position: absolute;left: 13%;top: 3%;opacity: 0}
.active .section5-bottom-pic{-webkit-animation:section1 1s ease-in-out 1s 1 forwards;}


.section5-menu,.section5-top-info{-webkit-writing-mode:vertical-rl;writing-mode:tb-rl;writing-mode:vertical-rl;letter-spacing:0.3rem;position: absolute;text-align: left;line-height: 1.5rem;}
.section5-menu{right: 13%;top: 3%;font-size: 1.1rem;font-weight: bold;color: #e9ebea;}
.active .section5-menu span{opacity: 0;}
/*.active .section5-menu span.section5-span1{-webkit-animation:section1 1s ease-in-out 1s 1 forwards;}
.active .section5-menu span.section5-span2{-webkit-animation:section1 2s ease-in-out 2s 1 forwards;}
.active .section5-menu span.section5-span3{-webkit-animation:section1 2s ease 2s 1 forwards;}*/
@-webkit-keyframes section5Menu{
    0%{right: 3%;opacity: 0.3;/*text-shadow: #dc9e38 0 1px 0; text-transform: uppercase;*/}
    50%{right: 9%;opacity: 0.7;/*text-shadow: #dc9e38 0 1px 0; text-transform: uppercase;*/}
    100%{right: 13%;opacity: 1;}
}

.section5-top-info{top: 3%;text-decoration: underline;right: 40%;font-size: 0.8rem;color: #e9ebea;padding-bottom: 4px;display: inline-block;opacity:0;}
.active .section5-top-info{-webkit-animation:section1 5s ease-in-out 2s 1 forwards; }

.section5-center-bg{width: 100%;display: inline-block;margin-top: 40%;}
.section5-bottom-line{width: 100%;display: inline-block;}
.section5-bottom-box{margin: 0 auto;width: 80%;position: absolute;left: 0;right: 0;bottom: 0;}
.section5-title{color: #e9ebea;font-size: 1.2rem;font-weight: bold;padding: 0;}



.section5-btn{margin: 6% auto 20% auto;}
.btn-pin,.bth-share{background-color: #332e36;color: #e9ebea;font-size: 1.2rem;font-family: 'microsoft yahei';text-align: center;display: inline-block;border:1px solid #b2b1b3;border-radius: 5px;padding: 5px 10px;text-decoration: none;}
.bth-share{margin-left: 13%;}

.section5-public{font-family: 'microsoft yahei';font-size: 1rem;position: absolute;bottom: 8%;left: 0;right: 0;margin: 0 auto;}
.active .section5-public{
    background: -webkit-gradient(linear,left top,right top,
        color-stop(0.5, #3CAF5A),color-stop(0.7, #3CAF5A),color-stop(0.8, white),
        color-stop(0.9, #3CAF5A),color-stop(1, #3CAF5A));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        -webkit-animation: slidetounlock 2s linear infinite;
        animation: slidetounlock 2s linear infinite;
        }

@-webkit-keyframes slidetounlock { 
    0% {background-position: -150px 0;} 
    80%{background-position: 100px 0;} 
    100% {background-position: 150px 0;}}
@keyframes slidetounlock { 
    0% {background-position: -150px 0;}
     80%{background-position: 100px 0;}
      100% {background-position: 150px 0;}
  }

.top-dt img{display: inline-block;width: 23px;height: 23px; position: fixed; left: 0;bottom: 10px; z-index: 10;right: 0;opacity: 0;margin: 0 auto;z-index: 99999;}
.active .top-dt img{-webkit-animation: topDt 2s infinite linear 1s;opacity: 1;}
@keyframes topDt{   
        0%{bottom: 20px;}
        100%{bottom: 10px;opacity: 1;}

    }
    @-webkit-keyframes topDt{   
         0%{bottom: 20px;}
        100%{bottom: 10px;opacity: 1;}

    }


/*我要分享弹出*/
.dialog-filter{z-index: 99999999;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,.35);width: 100%;height: 100%;}
.dialog-info{position: absolute;top: 50%;line-height: 20px;margin: 0 auto;left: 0;right: 0;color: #fff;width: 60%;font-weight: 900;}
.dialog-pic{right: 0;width: 50%;top: 10px;position: absolute;}
.active .dialog-pic{animation:jian 1s linear infinite;}
@keyframes jian{
    0%{top: 15px;}
    100%{top: 10px;}
}
@-webkit-keyframes jian{
    0%{top: 15px;}
    100%{top: 10px;}
}
